<template>
	<view>

		<view class="formItem">
			<text class="bitian">*</text>
			<view class="flexBox">
				<text class="formTitle">是否实名反馈</text>
				<u-radio-group v-model="adviceModel.realNameFlag" placement="row">
					<u-radio activeColor="#67C23A" name="1" label="是"></u-radio>
					<u-radio activeColor="#67C23A" name="0" label="否"></u-radio>
				</u-radio-group>
			</view>

		</view>
		<view class="formItem" v-if="adviceModel.realNameFlag == '1'">
			<text class="bitian">*</text>
			<text class="formTitle">姓名</text>
			<u-input color="#9C9C9C" inputAlign="right" placeholderStyle="color:#9c9c9c" placeholderClass="plceTXT"
				placeholder="请输入姓名" v-model="adviceModel.name" clearable border="none"></u-input>
		</view>
		<view class="formItem" v-if="adviceModel.realNameFlag == '1'">
			<text class="bitian">*</text>
			<text class="formTitle">联系方式</text>
			<!-- console.log(uni.$u.test.mobile('13845678900')); -->
			<u-input color="#9C9C9C" inputAlign="right" maxlength="11" type="number" placeholderStyle="color:#9c9c9c"
				placeholderClass="plceTXT" placeholder="请输入联系电话" v-model="adviceModel.phone" clearable
				border="none"></u-input>
		</view>
		<view class="formItem fankuiTitle">
			<text class="bitian">*</text>
			<view class="flexBox">
				<text class="formTitle">反馈内容</text>
			</view>
		</view>
		<view class="fankuiBox">
			<u-radio-group v-model="adviceModel.type" placement="row">
				<u-radio activeColor="#67C23A" name="1" label="首页内容"></u-radio>
				<u-radio activeColor="#67C23A" name="2" label="产品"></u-radio>
				<u-radio activeColor="#67C23A" name="3" label="场景方案"></u-radio>
				<u-radio activeColor="#67C23A" name="4" label="其他"></u-radio>
			</u-radio-group>
			<view class="jutiBox">
				<text class="formTitle"></text>
				<u-textarea color="#9C9C9C" height="140" maxlength='5000' adjustPosition cursorSpacing="150"
					v-model="adviceModel.message" @input="onTextareaInput" placeholder="请输入您的意见反馈内容"></u-textarea>
				<view class="bottomNum">
					{{currentNum}}/5000
				</view>
			</view>
		</view>

		<view class="formItem" v-if="adviceModel.realNameFlag == '1'">
			<view class="flexBox">
				<text class="formTitle">是否需要回复</text>
				<u-radio-group v-model="adviceModel.needReply" placement="row">
					<u-radio activeColor="#67C23A" name="1" label="是"></u-radio>
					<u-radio activeColor="#67C23A" name="0" label="否"></u-radio>
				</u-radio-group>
			</view>

		</view>

		<view class="sbmtBtn">
			<u-button type="primary" :disabled="!btnCanClick" @click="onConfirmClick" text="提交"></u-button>
		</view>

		<!-- 新人首次登录弹窗 -->
		<popLogin :isShow='showAuth' @onreject="onreject" @onLoginConfirm="onLoginConfirm"></popLogin>
	</view>
</template>

<script>
	import {
		insertFeedback,
		queryByOpenId,
		login
	} from "@/apis/index.js"
	import popLogin from "@/components/popLogin.vue"
	import Encrypt from '@/utils/aesUtil'

	export default {
		data() {
			return {
				adviceModel: {
					realNameFlag: '1',
					message: '',
					type: '1',
					name: '',
					phone: '',
					needReply: '0',
				},
				btnCanClick: false,
				currentNum: 0,
				showAuth: false,
			};
		},
		components: {
			popLogin
		},
		watch: {
			adviceModel: {
				handler(val) {
					if (val.realNameFlag == '1') {
						if (val.name && val.phone && val.message) {
							this.btnCanClick = true
						} else {
							this.btnCanClick = false
						}
					} else {
						if (val.message) {
							this.btnCanClick = true
						} else {
							this.btnCanClick = false
						}
					}

				},
				immediate: true,
				deep: true
			}
		},
		onLoad(option) {
			if(option.type == 'advice'){
				
			}else{
				this.getQuekLogin()
			}
		},
		onShow() {
			let phoneVal = uni.getStorageSync('phone').split('')
			phoneVal.splice(3,4,'****')
			this.adviceModel.phone = phoneVal.join('')
		},
		methods: {
			onConfirmClick() {
				this.adviceModel.message = uni.$u.trim(this.adviceModel.message)
				this.adviceModel.name = uni.$u.trim(this.adviceModel.name)
				if (!this.adviceModel.message) {
					uni.showToast({
						title: '不能提交空白信息',
						icon: 'none',
						duration: 2000
					})
					return
				}
				if (this.adviceModel.realNameFlag == '1') {
					if (!this.adviceModel.name) {
						uni.showToast({
							title: '请填写姓名',
							icon: 'none',
							duration: 2000
						})
						return
					} 
					if (this.adviceModel.phone.indexOf('*') == -1 && !uni.$u.test.mobile(this.adviceModel.phone)) {
						uni.showToast({
							title: '请输入正确的手机号',
							icon: 'none',
							duration: 2000
						})
						return
					}
				}

				let params = {
					type: this.adviceModel.type,
					realNameFlag: this.adviceModel.realNameFlag,
					message: this.adviceModel.message,
					userId: uni.getStorageSync('userMsg').userId,
				}

				if (this.adviceModel.realNameFlag == '1') {
					params = {
						...params,
						...this.adviceModel,
					}
				}
				if(this.adviceModel.phone.indexOf('*') != -1){
					params.phone = uni.getStorageSync('phone')
				}


				uni.showLoading({
					title: '提交中..'
				})
				insertFeedback(params).then(res => {
					if (res.code == '00000000') {
						uni.hideLoading()

						uni.showToast({
							title: '意见反馈信息提交成功',
							icon: 'none',
							duration: 2000
						})
						setTimeout(() => {
							uni.switchTab({
								url: "/pages/index/index",
							})
						}, 2000)
					}
				})

			},
			onTextareaInput(val) {
				if (val.length > 5000) {
					this.adviceModel.message = val = val.substr(0, 5000)
					this.$forceUpdate()
				}
				this.currentNum = val.length
			},
			getQuekLogin() {
				// 先判断用户是否登陆过,不是新用户就直接调接口拿手机hao 静默登录
				const that = this
				if (uni.getStorageSync('phone')) {
					this.getLogin()
				} else {
					uni.login({
						success(res) {
							if (res.code) {
								//发起网络请求
								queryByOpenId(res.code).then(re => {
									if (re.data && re.data.loginName) {
										uni.setStorageSync('phone', re.data.loginName);
										that.getLogin()
									} else { // 新用户
										that.showAuth = true
										that.$forceUpdate()
									}
								})
								console.log(res)
							} else {
								console.log('登录失败！' + res.errMsg)
							}
						}
					})
				}
			},
			/***
				登录逻辑
			**/
			onLoginConfirm() {
				this.showAuth = false
				this.getLogin();
			},
			onreject() {
				uni.setStorageSync('userMsg', '');
				uni.setStorageSync('phone', '');
				uni.setStorageSync('needLogin', false);
				this.showAuth = false;
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			getLogin() {
				const that = this
				uni.login({
					provider: 'weixin',
					success: function(res) {
						let code = res.code;
						let phone = uni.getStorageSync('phone');
						let data = {
							phoneJsCode: uni.getStorageSync('phoneJsCode'),
							wechatJsCode: code,
							loginName: Encrypt.encrypt(phone) || phone
							// name: nickName
						};
						login(data)
							.then((res) => {
								if (res.code == '00000000') {
									uni.setStorageSync('token', res.data.token);
									uni.setStorageSync('userMsg', res.data);
									that.adviceModel.phone = phone
									that.$forceUpdate()
								}
							})
							.catch((err) => {});
					}
				})
			},
		},

	}
</script>

<style lang="scss" scoped>
	.formItem {
		padding: 0rpx 30rpx;
		border-bottom: 1rpx solid #FAFAFA;
		display: flex;
		background-color: #fff;
		justify-content: space-between;
		height: 100rpx;
		box-sizing: border-box;
		line-height: 100rpx;
		position: relative;

		.formTitle {
			font-size: 32rpx;
		}

		.bitian {
			position: absolute;
			top: 6rpx;
			left: 12rpx;
			color: #F56C6C;
		}

		/deep/ .plceTXT {
			text-align: right;
			color: #9C9C9C;
		}

		/deep/ .u-input {
			// width: 60%;
			padding-left: 20rpx !important;
		}
	}

	.flexBox {
		display: flex;
		width: 100%;
		justify-content: space-between;

	}

	/deep/ .u-radio-group {
		flex: none !important;
	}

	/deep/ .u-radio {
		margin-left: 26rpx;
	}

	/deep/ .u-radio__icon-wrap {
		margin-right: 2px !important;
	}


	.jutiBox {
		padding: 10rpx;
		background-color: #fff;
		margin-top: 10rpx;
		position: relative;

		/deep/ .u-textarea {
			padding-bottom: 38rpx;
		}

		.bottomNum {
			position: absolute;
			font-size: 24rpx;
			color: #606266;
			bottom: 20rpx;
			right: 30rpx;
		}
	}

	.fankuiTitle {
		border: none;
	}

	.fankuiBox {
		background-color: #fff;
		border-bottom: 1rpx solid #FAFAFA;
	}

	.sbmtBtn {
		position: fixed;
		bottom: 50rpx;
		left: 0;
		width: 100%;
	}
</style>